<template>
  <div>
    <a-form-model layout="inline" :form="form" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
      <a-form-model-item>
        <a-input v-model="formInline.action" placeholder="资源编码,eg:userManager:btn_add">
          <a-icon slot="prefix" type="user"/>
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-select default-value="lucy" style="width: 120px" v-model="formInline.types" @change="handleChange">
          <a-select-option value="1">
           按钮
          </a-select-option>
          <a-select-option value="2">
            菜单
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-input v-model="formInline.des" placeholder="资源名称,eg:新增">
          <a-icon slot="prefix" type="lock"/>
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-button
          type="primary"
          html-type="submit"
          :disabled="formInline.action === '' || formInline.types === '' || formInline.des === ''"
        >
          添加
        </a-button>
      </a-form-model-item>
    </a-form-model>
     <a-button type="primary" @click="del">删除</a-button>
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
      :rowKey="(record) => record.id"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <span slot="types" slot-scope="text">
        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
      </span>
    </s-table>
  </div>
</template>
<script>
import { STable } from '@/components'
import { getAntPermissions, addAntPermission, delAntPermission } from '@/api/permission'
const statusMap = {
  1: {
    types: '1',
    text: '按钮'
  },
  2: {
    types: '2',
    text: '菜单'
  }
}

export default {
  name: 'User',
  components: {
    STable
  },
  data () {
    return {
      formInline: {
        action: '',
        types: '',
        des: ''
      },
      columns: [
        {
          title: '资源编码',
          dataIndex: 'action'
        },
        {
          title: '资源类型',
          dataIndex: 'types',
          scopedSlots: { customRender: 'types' }
        },
        {
          title: '资源名称',
          dataIndex: 'des'
        }
      ],
      selectedRowKeys: [],
      selectedRows: [],
      loadData: parameter => {
        return getAntPermissions(parameter)
          .then(res => {
            console.log('getUserList', res)
            return res.result
          })
      }
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].types
    }
  },
  methods: {
    handleSubmit (e) {
      debugger
      this.$message.info('创建')
      const antMenu2 = this.formInline
      addAntPermission(antMenu2).then(res => {
        console.log('addAntPermission.call()', res)
        this.$refs.table.refresh()
      })
      this.form.resetFields();
    },
    handleChange (value) {
      console.log(`selected ${value}`);
      this.formInline.types = value
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      debugger
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    del (selectedRowKeys) {
      debugger
      this.$confirm({
        title: '警告',
        content: `真的要删除吗?`,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          console.log('OK')
          // 在这里调用删除接口
          delAntPermission(selectedRowKeys).then(res => {
           console.log('delAntPermission.call()', res)
           this.$refs.table.refresh()
          })
        },
        onCancel () {
          console.log('Cancel')
        }
      })
    }
  }
}
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
